<template>
  <div style="margin-bottom:1rem">
    <div class="topimgdiv">
      <img :src="outdata.image" alt="" srcset="" class="topimg">
      <div class="toptitle">
        {{outdata.title}}
      </div>
      <div class="topicon" v-if="this.collectionState === '0'" @click="addCollection()">
        <hd-svg-icon name="hd-shoucang"  slot="left" size="30px" color="#ffffff" style="margin-left:10px;"></hd-svg-icon>
      </div>
      <div class="topicon" v-if="this.collectionState === '1'" @click="cancelCollection()">
        <hd-svg-icon name="hd-shoucang1"  slot="left" size="30px"  style="margin-left:10px;"></hd-svg-icon>
      </div>
      <div class="topicon1">
        <hd-svg-icon name="hd-pinglun1" slot="left" size="30px" color="#ffffff" style="margin-left:10px;"></hd-svg-icon>
      </div>
      <!-- <router-link :to="{path:'addComplaint',query: {source_id:this.$route.query.id,source_name:outdata.name,type:outdata.type}}">
        <div class="complaint">
            <hd-svg-icon name="hd-icon-yxj-complaint" size="25px"  style="margin-top:3px"></hd-svg-icon>
        </div>
      </router-link> -->
    </div>
    <div class="gerenxinxi">
      <yd-flexbox>
            <yd-flexbox-item style="height:100px;">
              <img :src="outdata.headimgurl" alt="" srcset="" class="touxiang">
              <div class="gerenxinxi1">
                <div class="namefont">{{outdata.nickname}}</div>
                <!-- <div class="level"> Lv7 </div> -->
                
                <div class="centericon">
                    
                    <hd-svg-icon name="hd-chakan" slot="left" size="13px" color="#ffffff" style="margin-right:5px;"></hd-svg-icon>
                    <span>{{outdata.see}}</span>
                    <hd-svg-icon name="hd-pinglun" slot="left" size="13px" color="#4F4F4F" style="margin-right:5px;margin-left:5px"></hd-svg-icon>
                    <span>{{outdata.num}}</span>
                    
                </div>
                <div class="datesize">{{outdata.create_times}}</div>
              </div>
            </yd-flexbox-item>
            <div class="address">
              <div style="margin-top:10px">{{outdata.destination}}</div>
            </div>
        </yd-flexbox>
    </div>
    <div class="information">
      <yd-flexbox>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-shizhong" size="15px" color="#000000"></hd-svg-icon>
              出发时间&nbsp;&nbsp;{{outdata.tour_date}}
            </yd-flexbox-item>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-icon" size="15px" color="#000000"></hd-svg-icon>
              人均费用&nbsp;&nbsp;{{outdata.money}}￥
            </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="information">
      <yd-flexbox>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-renwu" size="15px" color="#000000"></hd-svg-icon>
              人物&nbsp;&nbsp;{{outdata.personal_relationship_name}}
            </yd-flexbox-item>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-rili-copy" size="15px" color="#000000"></hd-svg-icon>
              出行天数&nbsp;&nbsp;{{outdata.day}}
            </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="content" v-html="outdata.content">
      <!-- “临淄中国古车博物馆，坐落在后李文化遗址上，是当代中国首家最系统、最完整、以车马遗址与文物陈列融为一体的博物馆。该馆包括春秋殉马车展厅和中国古车陈列展厅两部分：后李春秋殉车马坑列全国十大考古发现之一
    ┉┉”
    我原本对古代的车马没什么兴趣，但听爸爸这么一说，我还是在五一假日期间去了临淄的古车博物馆。
      在第一展厅，我了解到：车、马是我国古代陆上的主要交通工具。我国古车以其优异的性能在世界上长期处于领先地位。骑乘所用马具中极为重要的构件——马镫，
    也是我国首先发明的。在这方面，我国曾对人类文明作出了巨大的贡献。看到这儿，我为中国古代先进的技术感到骄傲。
      在第二展厅，我看到许多古代车马的复原模型。其中，有些皇帝坐的车辆并不是马拉着的，而是骆驼、大象拉着的，看到这儿，我又联想到历史课上学的：西汉张骞开辟丝绸之路，使我国与西域各国取得密切联系；
    来到驯马坑，听导游讲解道：“春秋殉马坑殉战车10辆，马32匹，规模之大，配套之齐全，马饰之精美，为当代全国之冠，列全国十大考古发现之一。后李春秋殉车马，分为一号坑、二号坑。
    一号坑长32米、宽5米、车10辆、马32匹。二号坑长8米、宽3米、车3辆、马6匹。”我还注意到，有的地方有一些像贝壳一样的东西，这时，导游道出其中的秘密：“贝壳是夏商时期的钱币，在春秋时期已不使用；但用贝壳陪葬代表了当时那户人家的地位和富有。
    由此也能看出，这户人家是非常富有、地位高贵的。”原来如此！在我国古代，埋葬一个人还这么麻烦，还得有陪葬品，并且还要把马弄晕了一起埋葬，多残忍！我不禁暗暗想到。 -->
    <!-- {{outdata.content}} -->
    </div>
    <div class="zhuzuoquan">
      本游记著作权葫芦岛官方所有,任何形式转载请联系作者.© 2017 
      <div style="text-align:center"> - THE END - </div>
    </div>
    <div class="youjihuifutitle" v-if="showpinglun === '1'">游记回复<span>7</span></div>
      <div style="border-bottom: 1px solid #999999;width:90%;margin-left:5%" v-for="(spitems,$index) in speakdata" :key="$index">
        <div class="youjihuifubody">
          <div class="huifu_gerenxinxi">
            <img :src="outdata.headimgurl" alt="" srcset="" class="touxiang2">
            <div style="width:100%;height:30px;">
              <div class="namefont1">{{outdata.nickname}}</div>
              <!-- <div class="level1"> Lv7 </div> -->
            </div>
            <div class="datebottom">{{spitems.create_time}}</div>
          </div>
        </div>
        <div class="body_tupinamiaoshu" v-html="spitems.content"></div>
        <div class="body_yinyongtupian">
          <div style="width:100%;padding-top:10px;font-size:.25rem;margin-left:3%">引用了游记的图片</div>
          <img :src="spitems.image" alt="" srcset="" class="yinyongtupian">
        </div>
      </div>
      <!-- <div>
        <hd-svg-icon name="hd-xiangxia" size="25px" color="#000000" style="margin-left:50%"></hd-svg-icon>
      </div> -->
    <div class="xiangqingdengpao" v-if="showdengpao === '1'">
      <div class="dengpao" @click="show = true">
        <hd-svg-icon name="hd-dengpao" slot="left" size="35px" color="#FF8000"></hd-svg-icon>
      </div>
      <yd-popup v-model="show" position="bottom" height="65%">
        <div class="dp_renwu">
          <div style="height:30px;">
            <img :src="outdata.headimgurl" alt="" srcset="" class="touxiang3">
          </div>
          <div style="font-size:.3rem;color:#FF8000;margin-left: 10px;">{{outdata.nickname}}</div>
          <div style="font-size:.28rem; margin-bottom:10px;margin-left: 10px;">在游记里豪迈的提到了~</div>
        </div>
        <div class="dp-body">
          <div class="dp_title">
            <img src="http://d.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=8d4a8117b1003af34defd464001aea6a/8601a18b87d6277f25b653262f381f30e924fc0c.jpg" alt="" srcset="" class="jingdianimg">
            <div style="float:left;font-size:.3rem;margin-top:15px;margin-left:10px;margin-bottom:10px;">{{dengpaodata.Htitle}}</div>
          </div>
          <!-- 跳转到详情 -->
          <div class="dp-content" v-for="hotel in dengpaodata.Hlist" :key="hotel.index">
            <router-link :to="{path:'./liveinfo',query: {id: hotel.place_id, name:hotel.name}}">
              <div class="dp-content1">{{hotel.name}}</div>
              <div class="dp-content1"><yd-rate slot="left" size="20px" v-model="hotel.star" color="#333333" active-color="#333333"></yd-rate></div>
              <div class="dp-content1">{{hotel.num}}条评论</div>
            </router-link>
          </div>
        </div>
        <div class="dp-body">
          <div class="dp_title">
            <img src="http://d.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=8d4a8117b1003af34defd464001aea6a/8601a18b87d6277f25b653262f381f30e924fc0c.jpg" alt="" srcset="" class="jingdianimg">
            <div style="float:left;font-size:.3rem;margin-top:15px;margin-left:10px;margin-bottom:10px;">{{dengpaodata.Jtitle}}</div>
          </div>
          <div class="dp-content" v-for="jingqu in dengpaodata.Jlist" :key="jingqu.index">
            <router-link :to="{path:'./recommend_detail',query: {id: jingqu.place_id, name: jingqu.name}}">
              <div class="dp-content1">{{jingqu.name}}</div>
              <div class="dp-content1"><yd-rate slot="left" size="20px" v-model="jingqu.star" color="#333333" active-color="#333333"></yd-rate></div>
              <div class="dp-content1">{{jingqu.num}}条评论</div>
            </router-link>
          </div>
        </div>
      </yd-popup>
    </div>
  </div>
</template>
<script>
export default {
  name: 'travelnotesinfo',
  data() {
    return {
      show: false,
      rate4: 4,
      outdata: {},
      speakdata: [],
      result: '',
      dengpaodata: {},
      showdengpao: '',
      showpinglun: '',
      collectionState: ''
    };
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.travelNotesUpdateSeeNum,
        data: {
          id: this.$route.query.id
        },
        success: resultData => {
          this.hdAjax({
            url: this.API.getTravelsInfo,
            data: {
              id: this.$route.query.id
            },
            success: resultData => {
              this.outdata = resultData.data;
            }
          });
        }
      });
      this.hdAjax({
        url: this.API.findCommentList,
        data: {
          source_type: 'T',
          place_id: this.$route.query.id
        },
        success: resultData => {
          this.speakarr = resultData.data.results.splice(0, 3);
          this.speakarr.forEach(function(element) {
            var imagearr = element.image.split(',');
            element.image = imagearr[0];
            // this.speakdata.push(element);
            // console.log(this.speakdata);
            // 获取评论创建时间
            var createtime = new Date(
              element.create_time.replace(/-/g, '/')
            ).getTime();
            var second = 1000;
            var minute = second * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var week = day * 7;
            // var halfamonth = day * 15;
            var month = day * 30;
            var now = new Date().getTime();
            var diffValue = now - createtime;
            if (diffValue < 0) {
              return;
            }
            var secC = diffValue / second;
            var minC = diffValue / minute;
            var hourC = diffValue / hour;
            var dayC = diffValue / day;
            var weekC = diffValue / week;
            var monthC = diffValue / month;
            // if (minC >= 1) {
            //   this.result = ' ' + parseInt(minC) + '分钟前'
            // } else if (hourC >= 1) {
            //   this.result = ' ' + parseInt(hourC) + '小时前'
            // } else if (dayC >= 1) {
            //   this.result = ' ' + parseInt(dayC) + '天前'
            // } else if (weekC >= 1) {
            //   this.result = ' ' + parseInt(weekC) + '周前'
            // } else if (monthC >= 1) {
            //   this.result = ' ' + parseInt(monthC) + '月前'
            // } else {
            //   this.result = '刚刚';
            // }
            if (monthC >= 1) {
              this.result = ' ' + parseInt(monthC) + '月前';
            } else if (weekC >= 1) {
              this.result = ' ' + parseInt(weekC) + '周前';
            } else if (dayC >= 1) {
              this.result = ' ' + parseInt(dayC) + '天前';
            } else if (hourC >= 1) {
              this.result = ' ' + parseInt(hourC) + '小时前';
            } else if (minC >= 1) {
              this.result = ' ' + parseInt(minC) + '分钟前';
            } else if (secC >= 1) {
              this.result = ' ' + parseInt(secC) + '秒前';
            } else {
              this.result = '刚刚';
            }
            element.create_time = this.result;
            this.speakdata.push(element);
          }, this);
          // console.log(resultData.data.results)
          if (resultData.data.results.length !== 0) {
            this.showpinglun = '1';
          }
        }
      });
      this.hdAjax({
        url: this.API.findHotelProductUserList,
        data: {
          id: this.$route.query.id
        },
        success: resultData => {
          this.dengpaodata = resultData.data;
          console.log(this.dengpaodata);
          console.log('上面是灯泡')
          // console.log(this.dengpaodata.Hlist)
          if (
            this.dengpaodata.Hlist !== undefined &&
            this.dengpaodata.Jlist !== undefined
          ) {
            this.showdengpao = '1';
          }
        }
      });
      this.hdAjax({
        method: 'POST',
        url: this.API.createFootprint,
        data: {
          id: this.$route.query.id,
          type: 'A'
        },
        success: (resultData) => {
          // this.collectionState = resultData.data.state;
          console.log('===========>' + 'success')
        }
      });
      this.hdAjax({
        url: this.API.getCollectionState,
        data: {
          source_id: this.$route.query.id
        },
        success: (resultData) => {
          this.collectionState = resultData.data.state;
          // console.log('===========>' + this.collectionState)
        }
      });
    },
    addCollection() {
        // alert('!!!!!')
      this.hdAjax({
        method: 'POST',
        url: this.API.createCollection,
        data: {
          id: this.$route.query.id,
          type: 'A'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已成功收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.$route.query.id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    },
    cancelCollection() {
      // alert('!!!!!')
      this.hdAjax({
        method: 'post',
        url: this.API.createCollection,
        data: {
          id: this.$route.query.id,
          type: 'A'
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '您已取消收藏!'})
          this.hdAjax({
            url: this.API.getCollectionState,
            data: {
              source_id: this.$route.query.id
            },
            success: (resultData) => {
              this.collectionState = resultData.data.state;
              // console.log('===========>' + this.collectionState)
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.topimg {
  width: 100%;
  height: 250px;
  /* position:relative */
}
.toptitle {
  position: absolute;
  top: 195px;
  width: 80%;
  font-size: 0.4rem;
  color: #ffffff;
  margin-left: 3%;
}
.topicon {
  position: absolute;
  top: 10%;
  left: 75%;
}
.topicon1 {
  position: absolute;
  top: 10%;
  left: 85%;
}
.gerenxinxi {
  width: 96%;
  height: 80px;
  border-bottom: 1px solid #999999;
  margin-left: 2%;
}
.touxiang {
  width: 60px;
  height: 60px;
  margin-left: 5px;
  margin-top: 5px;
  border-radius: 50px;
  float: left;
}
.gerenxinxi1 {
  float: left;
  width: 68%;
  margin-top: 15px;
  height: 65px;
}
.namefont {
  float: left;
  font-size: 0.3rem;
  font-weight: 800;
  margin-left: 8%;
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;/*行数*/
  -webkit-box-orient:vertical;
  width:40%
}
/* .level {
  float: left;
  font-size: 0.3rem;
  margin-top: 2%;
  margin-left: 3%;
  border: 1px solid #ff8000;
} */
.datesize {
  width: 50%;
  float: right;
  /* height: 30px; */
  text-align: center;
  margin-top: 10px;
  font-size: 0.25rem;
}
.centericon {
  width: 50%;
  float: right;
  height: 30px;
  text-align: center;
  margin-top: 36px;
  font-size: 0.25rem;
}
.address {
  width: 30%;
  height: 60px;
  font-size: 0.6rem;
  text-align: center;
  margin-top: 0px;
  border-left: 1px solid #999999;
  margin-bottom: 15px;
}
.information {
  width: 90%;
  margin-left: 10%;
  margin-top: 20px;
}
.content {
  width: 94%;
  margin-left: 3%;
  margin-top: 20px;
  font-size: 0.3rem;
}
.zhuzuoquan {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  color: #999999;
  font-size: 0.25rem;
}
.youjihuifutitle {
  margin-left: 5%;
  font-size: 0.35rem;
  margin-top: 20px;
}
.youjihuifubody {
  margin-left: 5%;
  margin-top: 20px;
}
.huifu_gerenxinxi {
  width: 90%;
  height: 50px;
}
.touxiang2 {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.namefont1 {
  float: left;
  font-size: 0.3rem;
  margin-left: 3%;
  margin-top: 10px;
}
.level1 {
  float: left;
  font-size: 0.23rem;
  margin-left: 2%;
  margin-top: 10px;
  border: 1px solid #ff8000;
}
.datebottom {
  float: left;
  font-size: 0.23rem;
  margin-left: 3%;
}
.body_tupinamiaoshu {
  width: 90%;
  margin-left: 5%;
  font-size: 0.3rem;
  margin-top: 10px;
  margin-bottom: 10px;
}
.body_yinyongtupian {
  width: 90%;
  margin-left: 5%;
  background-color: #f0f0f0;
  font-size: 0.25;
  margin-bottom: 20px;
  /* border-bottom:  1px solid #999999; */
}
.yinyongtupian {
  width: 60%;
  height: 300px;
  margin-left: 3%;
  margin-bottom: 3%;
  margin-top: 2%;
}
.dengpao {
  border: 1px solid #00e3e3;
  border-radius: 50px;
  background: #00e3e3;
  text-align: center;
  position: fixed;
  width: 13%;
  height: 53px;
  line-height: 68px;
  left: 83%;
  bottom: 100px;
  z-index: 100;
}
.dp_renwu {
  /* margin-top: 10px; */
  border-bottom: 1px solid #999999;
}
.touxiang3 {
  width: 60px;
  height: 60px;
  border-radius: 50px;
  /* position:absolute; */
  float: right;
  /* margin-top:10px; */
  /* margin-right: 10px; */
  /* z-index: 200; */
}
.complaint{
  float:right;
  margin-right: 50px;
  margin-top: -180px;
  position: relative;
  width: 45px;
  height: 20px; 
  text-align:center
}
.jingdianimg {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
}
.dp_title {
  height: 50px;
  border-bottom: 1px solid #999999;
  background-color: #f0f0f0;
}
.dp-content {
  font-size: 0.3rem;
  border-bottom: 1px solid #999999;
}
.dp-content1 {
  margin-top: 8px;
  margin-bottom: 5px;
  margin-left: 10px;
}
</style>

